<#assign title='view ' + full_profile_name />
<#assign activeTitle="config_file" />
<#include "/frag.head.ftl">
<link rel="stylesheet" href="${s3('/codemirror/lib/codemirror.css')}">
<link rel="stylesheet" href="${s3('/codemirror/addon/lint/lint.css')}">
<link rel="stylesheet" href="${s3('/codemirror/addon/merge/merge.css')}">
<link rel="stylesheet" href="${s3('/codemirror/theme/idea.css')}">
<style>
  .CodeMirror {
    height: auto;
  }
</style>

<#include "/frag.cf.ftl">
<#include "/frag.foot.ftl">
<script src="${s3('/codemirror/lib/codemirror.js')}"></script>
<#assign lint=false />
<#if ext == 'json'>
  <script src="${s3('/codemirror/mode/javascript/javascript.js')}"></script>
    <#assign editorMode='application/json' />
<#elseif ext == 'yml'>
  <script src="${s3('/codemirror/mode/yaml/yaml.js')}"></script>
  <script src="${s3('/codemirror/js-yaml.js')}"></script>
    <#assign editorMode='yaml' />
    <#assign lint=true />
<#elseif ext == 'xml'>
  <script src="${s3('/codemirror/mode/xml/xml.js')}"></script>
    <#assign editorMode='text/html' />
<#elseif ext == 'properties'>
<script src="${s3('/codemirror/mode/properties/properties.js')}"></script>
    <#assign editorMode='text/x-properties' />
</#if>

<script type="text/javascript">

  var editor;
  var contentJson = ${content_json};

  $(function () {
    initUI();
  });

  function initUI() {

    $('.CodeMirror').remove();
    $('#thecode_body').html('<div id="thecode"></div>')
    var target = document.getElementById("thecode");

    editor = CodeMirror(target, {
      value: contentJson.content,
      lineNumbers: true,
      mode: '${editorMode!''}',
      matchBrackets: true,
      autofocus: true,
      readOnly: true,
      viewportMargin: Infinity
    });
    $('.CodeMirror').css("background", "lightgrey");

  }

</script>